<template>
	<view>
		<view class="header">
			<view class="nav" @click="selNav('pdd')">
				<view class="nav-title">拼多多</view>
				<view class="nav-text" :class="[source=='pdd'? 'nav-text-active':'']">多多推荐</view>
			</view>
			<view class="nav" @click="selNav('jd')">
				<view class="nav-title">京东</view>
				<view class="nav-text" :class="[source=='jd'? 'nav-text-active':'']">好券商品</view>
			</view>
			<view class="nav" @click="selNav('taobao')">
				<view class="nav-title">淘宝</view>
				<view class="nav-text" :class="[source=='taobao'? 'nav-text-active':'']">全网好货</view>
			</view>
			<view class="nav" @click="selNav('douyin')">
				<view class="nav-title">抖音</view>
				<view class="nav-text" :class="[source=='douyin'? 'nav-text-active':'']">精选联盟</view>
			</view>
		</view>
		<scroll-view class="goods-list" scroll-y="true" :lower-threshold="50" @scrolltolower="getData" :style="{'height':Height+'px'}">
			<view class="goods-list-main" v-for="(item,index) in list" @click="goDetail(item.id)">
				<view class="goods-list-main-img">
					<image :src="item.goods_thumb_url" mode="widthFix"></image>
				</view>
				<view  class="goods-list-main-title">
					{{item.goods_name}}
				</view>
				<view class="goods-list-main-bottom">
					<view class="goods-list-price">
						&yen;{{item.price}}
					</view>
					<view class="goods-list-market-price">
						&yen;{{item.market_price}}
					</view>
					<view class="goods-list-sale">
						{{item.sales_tip}}购买
					</view>
				</view>
			</view>
		</scroll-view>
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				source:'pdd',
				list:[],
				page:1,
				Height:500
			}
		},
		onLoad() {
			var that = this;
			
			uni.getSystemInfo({
				success:function(res){
					that.Height = res.windowHeight-60;
				}
			})
		},
		onShow() {
			this.getData()
		},
		methods: {
			//获取产品列表
			getData(){
				var that = this;
				var local = uni.getStorageSync("location");
				 this.$api.sendRequest({
					url: '/supply/api/tuike/list',
					data: {
						page:that.page,
						source:that.source,
						latitude: local ? local.latitude : 0,
						longitude: local ? local.longitude : 0
					},
					success:function(res){
						if(that.page==1){
							if(res.data.count!=0){
								that.showEmpty = false;
							}
							that.list = res.data.list;
						}else{
							that.list.push.apply(that.list,res.data.list);
						}
						if(res.data.list.length>0){
							that.page++;
						}
					}
				});
			},
			//切换类型
			selNav(source){
				this.source = source;
				this.page = 1;
				this.getData()
			},
			goDetail(id){
				if (!uni.getStorageSync('token')) {
					this.$refs.login.open('/promotionpages/offlinepay/index?id=' + id);
					return;
				}
				uni.navigateTo({
					url:"/pages/goods/tuike/detail/detail?id="+id+"&source="+this.source
				})
			}
		}
	}
</script>

<style>
	.header{
		width: 100%;
		display: flex;
		height:120rpx;
		background-color: #ffffff;
	}
	.nav{
		flex: 1;
		text-align: center;
	}
	.nav-title{
		font-size: 16px;
		color: #333333;
		font-weight: 500;
	}
	.nav-text{
		color: #555555;
		font-size: 10px;
	}
	.nav-text-active{
		background-color: crimson;
		color: #fff;
		border-radius: 10px;
		display: inline-block;
		padding: 2px 5px;
	}
	.goods-list{
		width: 100%;
		display: inline-block;
		background-color: #f4f4f4;
	}
	.goods-list-main{
		width: 45%;
		float: left;
		margin: 10px 2.5%;
	}
	.goods-list-main-img image{
		width: 100%;
	}
	.goods-list-main-title{
		width: 100%;
		font-size: 14px;
		color: #333333;
		font-weight: 700;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.goods-list-main-bottom{
		width: 100%;
		display: flex;
		height: 40px;
	}
	.goods-list-price{
		color: crimson;
		font-size: 18px;
		font-weight: 700;
		line-height: 40px;
	}
	.goods-list-market-price{
		color: #777777;
		font-size: 10px;
		text-decoration: line-through;
		flex: 1;
		line-height: 50px;
	}
	.goods-list-sale{
		color: #777777;
		font-size: 10px;
		line-height: 50px;
		
	}
</style>
